<template>
  <div v-if="'' !== imageUrl" class="component-image-show">
    <img :src="imageUrl" :width="width" :height="height" @click="handlePictureCardPreview">
    <el-dialog
      :visible.sync="dialogVisible"
      title="预览"
      width="800"
      append-to-body
    >
      <img
        :src="imageUrl"
        style="display: block; max-width: 100%; margin: 0 auto"
      >
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ImageShow',
  props: {
    value: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 32
    },
    height: {
      type: Number,
      default: 32
    }
  },
  data() {
    return {
      dialogVisible: false,
      // baseUrl: process.env.VUE_APP_BASE_API,
      imageUrl: ''
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          // this.imageUrl = this.baseUrl + val
          this.imageUrl =  val
        } else {
          this.imageUrl = ''
        }
      },
      deep: true
    }
  },
  created() {
    if (this.value) {
        this.imageUrl =  this.value
      // this.imageUrl = this.baseUrl + this.value
    }
  },
  methods: {
    // 预览
    handlePictureCardPreview() {
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
  .component-image-show {
    img {
      cursor: pointer;
    }
  }
</style>
